<template>
  <div v-loading="loading" class="list-page">
    <div class="content" v-if="list.length">
      <div v-for="(item, index) in list" :key="index" class="dynamic-item">
        <div class="item">
          <el-card shadow="hover">
            <div @click="jump(item)">
              <img
                class="bgimg"
                v-if="item.shareImg"
                :src="$store.state.baseUrl + item.shareImg"
                alt=""
              />
              <img class="bgimg" v-else src="@/assets/default.jpg" alt="" />
              <img
                class="playBtn"
                v-if="item.liveStatus == 103"
                src="@/assets/playCircle.svg"
                alt=""
              />
              <div class="info">
                <p class="titel">{{ item.roomName }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div v-else class="notData"><span v-if="!loading">暂无数据</span></div>
    <el-pagination
      v-if="list.length"
      class="pagination"
      background
      @current-change="handleCurrentChange"
      :page-size="pageParams.pageSize"
      layout="prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>

    <el-dialog
      v-if="ewm && dialogVisible"
      title="请扫码进入直播间"
      :visible.sync="dialogVisible"
      width="25%"
    >
      <div style="width: 100%; display: flex; justify-content: center">
        <img
          :src="ewm"
          style="width: 280px; height: 280px; margin: 0 auto"
          alt=""
        />
      </div>
    </el-dialog>
  </div>
</template>
<script >
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      dialogVisible: false,
      ewm: "", //直播间二维码
      loading: true,
      list: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  mounted() {
    this.getData(this.pageParams);
  },
  methods: {
    getData(params) {
      try {
        api
          .getLiveRoomPage(params)
          .then((res) => {
            this.list = res.data;
            this.count = res.count;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } catch (error) {
        this.loading = false;
      }
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
      this.getData(this.pageParams);
    },
    jump(val) {
      //回放
      if (val.liveStatus != 103) {
        this.$router.push({ name: "liveDetail", params: { value: val } });
      } else {
        //扫码进直播间
        this.ewm = val.appletCode;
        this.dialogVisible = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  text-align: center;
}
.content {
  margin: 64px 0;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 100%;
    position: relative;
    .bgimg {
      width: 100%;
      // height: 255px;
    }
    .playBtn {
      position: absolute;
      width: 60px;
      height: 60px;
      left: 50%;
      top: 100px;
      transform: translateX(-50%);
    }
    .info {
      height: 114px;
      position: relative;
      padding: 16px;
      box-sizing: border-box;
      .titel {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .time {
        position: absolute;
        left: 16px;
        bottom: 24px;
      }
    }
  }
}
</style>